<template>
  <div class="header">
    <div class="logo">匿名检测系统</div>
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="collapseChage">
      <i v-if="!collapse" class="el-icon-s-fold"></i>
      <i v-else class="el-icon-s-unfold"></i>
    </div>
    <div class="header-right">
      <div class="header-user-con">
        <!-- 用户头像 -->
        <div class="user-avator">
          <img v-if="userInfo.headImg" :src="userInfo.headImg"/>
          <img v-else src="../assets/img/img.jpg"/>
        </div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ userInfo.nickName }}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-drawer
        class="aside_msg"
        :visible.sync="drawer"
    >
      <div>
        <img v-if="userInfo.headImg" :src="userInfo.headImg" class="centerHeadImg"/>
        <div style="width: 100%;text-align: center;margin: 10px 0">
          <el-upload
              :action="getUploadUrl(userInfo.id,'/examManage')"
              :show-file-list="false"
              :headers="header"
              :on-success="handleAvatorSuccessHeader"
              :before-upload="beforeAvatorUpload"
          >
            <el-button size="mini" type="success">头像上传</el-button>
          </el-upload>
        </div>
        <el-form ref="elForm" :model="userInfo" :rules="rules" size="medium" label-width="120px">
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model="userInfo.nickName" placeholder="请输入昵称" clearable :style="{width: '80%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="userInfo.userName" placeholder="请输入用户名" clearable :style="{width: '80%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" show-password v-model="userInfo.passWord" placeholder="请输入密码" clearable
                      :style="{width: '80%'}">
            </el-input>
          </el-form-item>
        </el-form>
        <div style="width: 100%;text-align: center">
          <el-button type="primary" @click="saveData">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {util} from '../utils/index';
import {saveOrUpdateUrl} from "@/api";

export default {
  mixins: [util],
  data() {
    return {
      fullscreen: false,
      userInfo: {},
      drawer: false,
      header: '',
      rules: {
        userName: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        nickName: [{
          required: true,
          message: '请输入昵称',
          trigger: 'blur'
        }],
      },
    };
  },
  created() {

  },
  computed: {
    collapse() {
      return this.$store.state.collapse;
    }
  },
  methods: {
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == "loginout") {
        localStorage.removeItem("ms_username");
        this.$router.push("/login");
      }
    },
    handleAvatorSuccessHeader(res) {
      if (res && res.code == 200) {
        this.notify("操作成功", "success");
        this.$router.push("/login")
      }
    },
    // 侧边栏折叠
    collapseChage() {
      this.$store.commit("hadndleCollapse", !this.collapse);
    },

    saveData() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) {
          this.notify("输入格式不正确!", "error");
          return
        }
        var param = {};
        param.token = sessionStorage.getItem("manageToken");
        param.nickName = this.userInfo.nickName;
        param.userName = this.userInfo.userName;
        param.id = this.userInfo.id;
        if (this.userInfo.passWord) {
          param.passWord = this.userInfo.passWord
        }
        this.$basePostRequest("/examManage" + saveOrUpdateUrl, param).then(res => {
          this.notify("操作成功", "success");
          this.$router.push("/login")
        });
      })


    },
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }

  }
};
</script>
<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: black;
  background-color: rgb(50, 65, 87) !important;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}


.header .logo {
  text-align: center;
  float: left;
  width: 200px;
  line-height: 70px;
}

.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}

.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}

.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}

.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}

.btn-bell .el-icon-bell {
  color: #fff;
}

.user-name {
  margin-left: 10px;
}

.user-avator {
  margin-left: 20px;
}

.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}

.el-dropdown-menu__item {
  text-align: center;
}

::v-deep .aside_msg {
  margin: 20px 20px 20px 0;
  height: calc(100vh - 40px) !important;
}

.centerHeadImg {
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: 1px solid #20a0ff;
  height: 200px;
  width: 200px;
}

/*白色主题*/


.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: white;
}

.el-dropdown-link::v-deep {
  color: white;
}
</style>
